// 新增的拼装状态组件
export default function Info() {
  return (
    <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
      {/* 管片信息 */}
      <div className="text-center mb-2">
        <div className="flex items-center justify-center mb-1">
          <div className="w-1.5 h-1.5 bg-red-500 rounded-full mr-1.5"></div>
          <span className="text-gray-700 text-xs">管片</span>
        </div>

        {/* 管片序列 */}
        <div className="text-[0.6rem] text-gray-600 leading-tight">
          L1 B1 B2 B3 B4 B5 B6 L2 F
        </div>
      </div>

      {/* 圆形进度指示器 */}
      <div className="relative w-16 h-16 mx-auto mb-2">
        {/* 背景圆环 */}
        <div className="absolute inset-0 rounded-full border-2 border-gray-200"></div>
        {/* 进度圆环 */}
        <div
          className="absolute inset-0 rounded-full border-2 border-teal-400"
          style={{
            borderTopColor: 'transparent',
            borderRightColor: 'transparent',
            borderBottomColor: 'transparent',
            transform: 'rotate(45deg)',
            transition: 'transform 2s linear infinite'
          }}
        ></div>
        {/* 中心文字 */}
        <div className="absolute inset-0 flex items-center justify-center">
          <span className="text-teal-400 text-xs font-medium">31.7%</span>
        </div>
      </div>

      {/* 拼装中标题 */}
      <div className="text-red-500 text-sm font-medium">拼装中</div>
    </div>
  );
};